
<template>
  <section>
    <el-card class="box-card">
      <el-upload
        :action="uploadUrl"
        :limit="20"
        :headers="headers"
        :on-success="over"
        :multiple=false
        :on-exceed="exceed"
        :data="record"
        :on-remove="delFile"
        :on-progress="overProgress"
        :on-change="handleChange"
        :on-error="errorMsg"
        :before-upload="uploadFile"
        :show-file-list=false
        accept="htm, html, css, js, jpg, gif, png, swf"
        :file-list="fileList"
      >
        <el-button icon="el-icon-document-add"  type="primary" size="small">
          文件上传
        </el-button>
      </el-upload>
      <el-button style="float: right; margin-top: -33px;" icon="el-icon-arrow-left"  size="small" @click="back()">
        返回
      </el-button>
      <el-table
        style="margin: 25px 0px 80px 0px;border: 1px solid #ededed;"
        :data="TempChild.fileNameList"
        table
        stripe
        header-row-class-name="table-header"
        row-class-name="table-row-border"
        cell-class-name="table-row-cell"
        header-cell-class-name="table-header-cell"
      >
        <el-table-column
          prop="number"
          label="图标"
          align="center"
          show-overflow-tooltip
        >
          <template>
            <i class="el-icon-folder-opened" style="font-size: 20px"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="模板名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{scope.row.type | tempType}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-delete"
              @click="templateDel(scope.row)"
            ></el-button>
            <el-button
              v-if="scope.row.type == 'FILE'"
              size="mini"
              icon="el-icon-edit"
              @click="templateEdit(scope.row)"
            ></el-button>
            <el-button
              v-if="scope.row.type == 'DIR'"
              size="mini"
              icon="el-icon-right"
              @click="templateFile(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <!--tool-->
      </el-table>
    </el-card>
  </section>
</template>

<script>
  import { mapGetters } from "vuex";
  export default {
    data(){
      return{
        skinFolderName:"",
        fileName:"",
        uploadUrl: window.api.domain + "/api/file/upload/article/tem",
        headers: {
          appKey: window.sessionStorage.getItem("appKey"),
          Authorization: window.sessionStorage.getItem("token"),
          fileUrl:""
        },
        record:{
        },
        fileList: [],
      }
    },
    computed: {
      ...mapGetters({
        TempChild: "TempChild",
      })
    },
    filters: {
      tempType: function(value) {
        if (value =="DIR") {
          return "文件夹";
        } else {
          return "文件";
        }
      }
    },
    created(){},
    mounted () {
      this.skinFolderName=this.$route.query.skinFolderName
      this.getChildList()
    },
    methods:{
      //打开文件夹，进入文件
      templateFile(row){
        console.log("打开文件夹",row)
        let  skinFolderName='templets/1/'+row.name
        this.skinFolderName = skinFolderName
        let param = {
          skinFolderName:skinFolderName
        }
        this.$store.dispatch("showChildFileAndFolderUsingGETS",param).then(ret => {
        })
      },
      over() {
        this.getChildList()
        this.$message({
          message:"上传成功！",
          type:"success"
        })
      },
      exceed() {
        //重复选择文件,弹出错误弹窗
        this.$message({
          message: "最多仅支持上传一个文件",
          type: "warning"
        });
      },
      delFile() {},
      overProgress() {},
      handleChange(file) {
      },
      uploadFile(file){
        this.fileName = file.name;
        this.headers.fileUrl=this.skinFolderName+'/'+file.name;
      },
      errorMsg() {
        this.$message({
          message: "上传失败，请重新上传！",
          type: "error"
        });
      },
      //获取列表信息
      getChildList(){
        console.log(this.skinFolderName)
        var param = {
          skinFolderName:this.skinFolderName
        }
        this.$store.dispatch("showChildFileAndFolderUsingGETS",param).then(ret => {
        })
      },
      //模板编辑
      templateEdit(row){
        console.log("传递参数",row)
        this.$router.push({
          name: "templateEditor",
          query:{
            fileName:'templets/1/'+row.name
          }
        });
      },
      //模板删除
      templateDel(row){
        var param = {
          name: row.name,
          type: 2
        }
        console.log("文件删除",param)
        this.$store.dispatch("deleteFileUsingDELETES",param).then(ter => {
          this.$message({
            message:"删除成功！",
            type:"success"
          })
          this.getChildList()
        }).catch(()=>{
          this.$message({
            message:"删除失败！",
            type:"error"
          })
        })
      },
      //返回
      back() {
        this.$router.go(-1)
      }
    },
    watch:{}
  }
</script>

<style scoped>

</style>
